const path = require('path');
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',  // 入口文件路径
  output: {
    filename: 'focus.js',   // 输出文件名
    path: path.resolve(__dirname, '../dist'),  // 输出目录
    clean: true,             // 构建前自动清理dist目录
    // 生成 ES5 语法代码
    environment: {
      arrowFunction: false,
      const: false,
      module: false
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: false, // 禁用CSS Modules
              sourceMap: false // 禁用SourceMap
            }
          }
        ],
      },
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: "ie 8",
                useBuiltIns: "usage",
                corejs: { version: "3", proposals: true }
              }
            ]
          ],
          plugins: [
            "@babel/plugin-transform-runtime"
          ]
        }
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.resolve(__dirname, '../index.html'), // 使用绝对路径
      inject: "body"
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ]
};